<template>
    <el-drawer v-model="isShow" direction="rtl" :destroy-on-close="true" :size="550">
        <template #header>
            <span>{{ title }}</span>
        </template>
        
        <template #default>
            <el-card v-loading="loading" shadow="always" class="detail-panel">
                <el-row v-for="(item, key) in components[name]?.schema.properties" :key="key" type="flex" align="middle" class="row-item">
                    <el-row class="item-label">{{ item.label }}：</el-row>
                    <el-row class="item-value">{{ dtoModel[key] }}</el-row>
                </el-row>
            </el-card>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, inject } from 'vue';
import $curl from '$common/curl';
import schemaForm from '$widget/schema-form/schema-form.vue'

const name = ref('detailPanel');
const { components, api } = inject('schemaViewData');

const isShow = ref(false);
const title = ref('')
const loading = ref(false)
const saveBtnText = ref('')
const mainKey = ref('')
const mainValue = ref('')
const dtoModel = ref({})

const show = (rowData) => {
    const { config } = components.value[name.value]
    title.value = config.title
    mainKey.value = config.mainKey // 主键
    mainValue.value = rowData[config.mainKey]
    dtoModel.value = {}
    isShow.value = true;

    fetchFormData()
}

const fetchFormData = async () => {
    if (loading.value) {
        return;
    }
    loading.value = true
    const res = await $curl({
        method: 'get',
        url: api.value,
        query: {
            [mainKey.value]: mainValue.value
        }
    })
    loading.value = false
    if (!res || !res.success) {
        return
    }
    dtoModel.value = res.data
}

const close = () => {
    isShow.value = false;
}

defineExpose({
    name,
    show
});
</script>

<style lang="less" scoped>
.detail-panel {
    padding: 40px;
    .row-item {
        margin-bottom: 20px;
    }
    .item-label {
        font-weight: bold;
    }
    .item-value {
        margin-left: 10px;
    }
}
</style>